<template>
  <div class="big-screen-home-page">
    <div>
      <div class="page-header">
        <img class="banner" src="../../../public/images/bigScreen/header-img.png" alt=""/>
        <img src="../../../public/images/bigScreen/header-img1.png" alt=""/>
        <div class="title">可视化房产态势图</div>
        <div class="bottom-img">
          <img src="../../../public/images/bigScreen/header-img3.png" alt=""/>
        </div>
      </div>
      <div class="introduce-info">
        {{ introduceText }}
      </div>
      <div class="middle" @click="gotoDataSummary">
        <div class="circle" ></div>
        <div class="circle2">
          <img class="circle2" src="../../../public/images/bigScreen/cicle.png" alt=""/>
        </div>
        <div class="logo">
          <img src="../../../public/images/bigScreen/logo.png" alt=""/>
        </div>
      </div>
      <div class="bottom">
        <div class="enter-btn" @click="gotoDataSummary">点击进入</div>
        <div><img src="../../../public/images/bigScreen/block.svg" alt=""/></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      introduceText: '',
      text: '郑州大学（简称郑大，英文简称：ZZU）由河南省人民政府兴办，法定住所地为河南省郑州市科学大道100号。学校总占地面积6100余亩，主校区位于郑州市科学大道100号，主校区南校园位于郑州市大学北路75号，主校区北校园位于郑州市文化路97号，主校区东校园位于郑州市大学北路40号，主校区西校园位于郑州市科学大道157号；洛阳校区位于洛阳市周山大道6号。学校面向全国招生，现有全日制普通本科生4.7万余人、研究生2.4万余人，以及来自103个国家的留学生2700余人。',
      timer: null
    }
  },
  mounted() {
    this.appear(this.text)
  },
  unmounted() {
    clearTimeout(this.timer)
  },
  methods: {
    appear(content) {
      const _this = this
      this.introduceText = ''
      clearTimeout(this.timer)
      const speed = 30 // 设置定时的速度 越来越快
      let count = 1
      function changeContent() {
        _this.introduceText = content.substring(0, count) // 截取字符串
        count++
        if (count !== content.length + 1) {
          clearTimeout(_this.timer)
          _this.timer = setTimeout(() => {
            changeContent()
          }, speed)
        }
      }
      changeContent()
    },
    gotoDataSummary() {
      this.$router.replace({ path: '/zzdxfcmap' })
    }
  }
}
</script>

<style lang="scss">
.big-screen-home-page{
  width: 100%;
  height: 100vh;
  background: url(../../../public/images/bigScreen/bg1.jpg) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  >div{
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.3);
  }
  .page-header{
    position: relative;
    padding-top: 15px;
    img{
      width: 100%;
      height: 8.5vh;
    }
    .banner{
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .title{
      position: absolute;
      top: 0px;
      font-size: 42px;
      color: rgb(180, 253, 255);
      text-align: center;
      width: 100%;
      line-height: 8.5vh;
    }
    .bottom-img{
      position: absolute;
      width: 100%;
      bottom: 0px;
      text-align: center;
      img{height: 15px; width: auto; max-width: 37%;}
      animation: opacityGradient;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
  }
  .introduce-info{
    padding: 4vh 60px;
    line-height: 30px;
    color: rgb(180, 253, 255);
    font-weight: bold;
    // font-size: 14px;
    text-indent: 28px;
    letter-spacing: 1px;
  }
  .middle{
    position: absolute;
    width: 39vh;
    height: 39vh;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .circle{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background: url(../../../public/images/bigScreen/circle1.png) no-repeat;
      background-size: 100% 100%;
      animation-name: spinning;
      animation-timing-function: linear;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    .circle2{
      width: 26.85vh;
      height: 27.2vh;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      margin: auto;
      animation-name: spinning-reverse;
      animation-timing-function: linear;
      animation-duration: 6s;
      animation-iteration-count: infinite;
      img{width: 100%;}
    }
    .logo{
      width: 16vh;
      height: 16.94vh;
      img{width: 100%;}
    }
  }
  .bottom{
    position: absolute;
    width: 100%;
    bottom: -6px;
    text-align: center;
    .enter-btn{
      font-size: 32px;
      animation-name: pulse;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-fill-mode: backwards;
      color: #fff;
      text-shadow: rgb(19,238,245) 0px 2px 6px;
      margin-bottom: 5px;
      cursor: pointer;
      display: inline-block;
      padding: 0px 15px;
    }
  }
}

@keyframes opacityGradient {
  0%, 50%, 100% { opacity: 1;}
  25%, 75% {opacity: 0;}
}
@keyframes spinning{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}
@keyframes spinning-reverse{
  0% { transform: rotate(359deg); }
  100% { transform: rotate(0deg); }
}
@keyframes pulse{
  0% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  100% { transform: scale3d(1, 1, 1); }
}
</style>
